Animal Trading Cards

Design

Page resembles card from design prototype.

• The text is italicized for the animal’s interesting fact.
• The labels are bolded for the animal’s list items.
• The dots are removed from the animal's list items.
• Uses border around animal’s name, image, and information (interesting fact, list items, and description).
• Uses border around animal’s information.
• Uses spacing between animal’s name, image, and information.
• Card width should be fixed and include the spacing around the image (Since image is 300px wide, card should be 300px + spacing on either side. Card should not expand with the browser window).

Feel free to customize your information and styles so long as you follow the above rules. For inspiration, you can try playing around with background colors or border radius!

Custom Image and Text

The placeholder image and information is replaced with favorite animal image and information.

The image is 300px wide or the image's width is set to 300px.

The image’s alt is relevant to the animal used.

CSS Classes

The HTML includes classes that are used for styling.

Classes are given meaningful names.

Separation of Concerns

Student separates HTML from CSS by linking to stylesheet.

HTML code does not include <style> elements or style attributes in the body.

Code Quality

Code is ready for review, meaning new lines and indentation are used for easy readability.